<template>
  <div class="exam-container">
    <el-skeleton :loading="isFirst" :rows="15" animated>
      <div class="head-content-search">
        <div style="display: flex">
          <div class="exam-top-addbtn">
            <el-button type="primary" @click="addUser">新增</el-button>
          </div>

          <!-- 搜索框 -->
          <div class="mySearch" style="flex: 1">
            <el-input
              :width="150"
              v-model="key"
              placeholder="输入姓名或账号查询"
              class="input-with-select"
            >
              <template #append>
                <el-button :icon="Search" />
              </template>
            </el-input>
          </div>

          <div class="myTips">
            <!-- <el-checkbox-group v-model="chosen" @change="checkStatus"> -->
            <el-checkbox v-model="check_one" @change="checkStatus_one">不看禁用</el-checkbox>
            <el-checkbox v-model="check_two" @change="checkStatus_two">只看激活</el-checkbox>
            <!-- <el-checkbox label="IsPublish4">未发布</el-checkbox> -->
            <!-- </el-checkbox-group> -->
          </div>
        </div>
      </div>

      <div style="margin-top: 10px">
        <el-table :data="data" v-loading="isLoad" :border="true">
          <el-table-column label="序号" type="index" width="60px"></el-table-column>
          <el-table-column
            label="姓名"
            prop="name"
            :show-overflow-tooltip="true"
            class="last_commoner"
          >
          </el-table-column>

          <el-table-column label="账号" prop="account" :show-overflow-tooltip="true">
          </el-table-column>

          <el-table-column label="组织/职务" prop="zname" :show-overflow-tooltip="true">
            <template #default="scope">
              <el-tag type="primary" size="small" v-if="scope.row.organizations.length == 0">
                -
              </el-tag>

              <el-tag
                type="primary"
                size="small"
                v-else-if="
                  scope.row.organizations[0].oname == undefined ||
                  scope.row.organizations[0].oname == 'undefined'
                "
              >
                {{ scope.row.organizations[0].zname }}
              </el-tag>

              <el-tag type="primary" size="small" v-else>
                {{ scope.row.organizations[0].oname }}·{{ scope.row.organizations[0].zname }}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column label="激活" prop="isActive" :show-overflow-tooltip="true" width="100">
            <template #default="scope">
              <el-tag type="success" size="small" v-if="scope.row.isActive == 1"> 是 </el-tag>

              <el-tag type="danger" size="small" v-else> 否 </el-tag>
            </template>
          </el-table-column>

          <el-table-column label="禁用" prop="endTime" :show-overflow-tooltip="true">
            <template #default="scope">
              <el-tag type="success" size="small" v-if="scope.row.isBan == 0"> 否 </el-tag>

              <el-tag type="danger" size="small" v-else> 是 </el-tag>
            </template>
          </el-table-column>

          <el-table-column
            label="添加时间"
            prop="createTime"
            :show-overflow-tooltip="true"
          ></el-table-column>

          <el-table-column label="操作" fixed="right" width="200">
            <template #default="scope">
              <!-- 删除 -->

              <el-button type="primary" :loading="btnLoad">详情</el-button>

              <el-popconfirm
                title="确认删除吗?"
                confirm-button-text="确认"
                cancel-button-text="取消"
                @confirm="deleteUser(scope.row.id)"
              >
                <template #reference>
                  <el-button type="danger" v-if="scope.row.isActive == 0" :loading="btnLoad"
                    >删除</el-button
                  >
                </template>
              </el-popconfirm>

              <el-popconfirm
                title="确认禁用吗?"
                confirm-button-text="确认"
                cancel-button-text="取消"
                @confirm="isBan(scope.row.id, 1)"
              >
                <template #reference>
                  <el-button
                    type="danger"
                    v-if="scope.row.isActive == 1 && scope.row.isBan == 0"
                    :loading="btnLoad"
                    plain
                    >禁用</el-button
                  >
                </template>
              </el-popconfirm>

              <el-popconfirm
                title="确认启用吗?"
                confirm-button-text="确认"
                cancel-button-text="取消"
                @confirm="isBan(scope.row.id, 0)"
              >
                <template #reference>
                  <el-button
                    type="success"
                    v-if="scope.row.isActive == 1 && scope.row.isBan == 1"
                    :loading="btnLoad"
                    >启用</el-button
                  >
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div
          style="
            margin-top: 10px;
            padding-bottom: 10px;
            display: flex;
            justify-content: space-between;
            border: 1px solid #eee;
          "
        >
          <el-pagination
            background
            @size-change="changLimit"
            layout="sizes,prev, pager, next,total"
            :total="total"
            small
            style="margin: 10px 0 0 10px"
            v-model:current-page="page"
            :page-sizes="[10, 20, 30, 40, 50]"
          />
        </div>
      </div>
    </el-skeleton>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, watchEffect } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { getUsers,deleteUsers,banUsers } from '../../api/org'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { closeLoad, openLoad } from '@/utils/loading'

export default defineComponent({
  setup() {
    const router = useRouter()
    const data = reactive({
      check_one: false,
      check_two: false,
      data: [],
      page: 1,
      limit: 10,
      key: '',
      total: 0,
      isLoad: false,
      isFirst: false,
      btnLoad: false
    })

    const events = {
      changLimit(num: any) {
         data.limit=num;
      },
      //第一个复选框改变触发
      checkStatus_two() {
        events.getUser()
      },
      //第二个复选框改变触发
      checkStatus_one() {
        events.getUser()
      },
      
      //添加用户
      addUser() {
        router.push("/organization/user/add");
      },
      //删除用户
      deleteUser(id: any) {
        openLoad("请稍后");
        deleteUsers({ids:[id]}).then((res:any)=>{
          closeLoad();
          if(res.result===0){
            ElMessage.success(res.message);
            events.getUser();
          }else{
            ElMessage.error(res.message)
          }
        })
      },
      //禁用/启用
      isBan(id: any, num: any) {
        openLoad("请稍后");
        banUsers({ids:[id],isBan:num}).then((res:any)=>{
          closeLoad();
          if(res.result===0){
            ElMessage.success(res.message);
            events.getUser();
          }else{
            ElMessage.error(res.message)
          }
        })
      },
      //获取用户列表
      getUser() {
        data.isLoad = true
        let obj: any = {
          page: data.page,
          limit: data.limit,
          key: data.key
        }
        if (data.check_one) {
          obj.isBan = 0
        }

        if (data.check_two) {
          obj.isActive = 1
        }

        getUsers(obj).then((res: any) => {
          data.data = res.data.data
          data.total = res.data.total
          data.isLoad = false
        })
      }
    }
    watchEffect(() => {
      events.getUser()
    })

    return {
      ...toRefs(data),
      ...events,
      Search
    }
  }
})
</script>
